<!-- src/components/TreeTableDialog.vue -->
<template>
  <!-- ✅ 必须有一个根元素 -->
  <div class="tree-table-wrapper">
    <!-- 搜索框 -->
    <div style="margin-bottom: 15px;">
      <el-input
        v-model="filterText"
        placeholder="请输入名称搜索"
        clearable
      />
    </div>

    <!-- 表格 -->
    <el-table
      ref="treeTable"
      :data="filteredData"
      row-key="id"
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      style="width: 100%;"
      default-expand-all
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column prop="name" label="名称" sortable>
        <template #default="{ row }">
          <span>{{ row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="type" label="类型" width="100" />
    </el-table>

    <!-- 按钮（正常渲染） -->
    <div class="footer-buttons" style="margin-top: 20px; text-align: right;">
      <el-button @click="handleClose">取 消</el-button>
      <el-button type="primary" @click="handleSubmit">确 定</el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'TreeTableDialog',
  // 注意：此时不需要 showTreeTable prop
  data() {
    return {
      filterText: '',
      treeData: [ /* 同上 */ ],
      filteredData: []
    }
  },
  created() {
    // ✅ 初始化数据
    this.filteredData = this.deepClone(this.treeData)
  },
  mounted(){
        this.filteredData = this.deepClone(this.treeData)
  },
  watch: {
    filterText(val) {
      this.filterTree(val)
    }
  },
  methods: {
    // 其他方法同上
    filterTree() { /* ... */ },
    handleSubmit() { /* emit 提交 */ },
    handleClose() { /* emit 关闭 */ },
    deepClone(obj) { return JSON.parse(JSON.stringify(obj)) }
  }
}
</script>